<template>
  <div id="chosetheme" class="menu-set">
    <fieldset class="layui-elem-field layui-field-title">
      <legend>网站模板</legend>
      <div class="layui-field-box">
        <ul class="theme-list clearfix">
          <li>
            <div class="theme" @click="changeTheme('tradition')">
              <img src="/Areas/Template/Content/Design/images/mmuban2.jpg" alt="">
              <div class="cover" v-show="pageconfig.theme=='tradition'">
                <i class="el-icon-check"></i>
                当前选择
              </div>
            </div>
          </li>
          <li>
            <div class="theme" @click="changeTheme('tradition2')">
              <img src="/Areas/Template/Content/Design/images/mmuban3.jpg" alt="">
              <div class="cover" v-show="pageconfig.theme=='tradition2'">
                <i class="el-icon-check"></i>
                当前选择
              </div>
            </div>
          </li>
          <!-- <li>
            <div class="theme" @click="changeTheme('tradition3')">
              <img src="/Areas/Template/Content/Design/images/mmuban2.jpg" alt="">
              <div class="cover" v-show="pageconfig.theme=='tradition3'">
                <i class="el-icon-check"></i>
                当前选择
              </div>
            </div>
          </li> -->
        </ul>
      </div>
    </fieldset>
  </div>
</template>

<script>
    export default {
        props: ["pageconfig"],
        methods: {
            changeTheme:function(name){
                this.pageconfig.theme = name;
                this.$emit("setdone", 1)
            }
        }
    }
</script>

<style lang="less" scoped>
  .clearfix:after{
    content: "";
    display: block;
    clear: both;
  }
  .clearfix {
    zoom: 1;
  }
  .theme-list li{
    float:left;
  }
  .theme-list li:nth-of-type(odd){
    margin-right:10px;
  }
  .theme {
    display: inline-block;
    border: 1px solid #999;
    margin: 10px 0;
    position: relative;
    cursor: pointer;
  }
  .theme img{
    width: 133px;
  }
  .cover {
    display: inline-block;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    font-size: 14px;
    text-align: center;
    i {
      font-size: 40px;
      display: block;
      margin: 0;
      margin-top: 80px;
      margin-bottom: 10px;
    }
  }
</style>